<!--
 * @Author: zhangfeng
 * @Date: 2024-01-12 10:31:16
 * @LastEditTime: 2024-02-02 16:04:11
 * @LastEditors: zhangfeng
 * @Description: 
 * @FilePath: \manager\managersystem\src\views\sourceMateral\indexPage.vue
 * © 2023 张峰，All rights reserved.
-->
<template>
	<el-card class="box-card">
		<el-row class="mb-4">
			<el-button @click="handleAdd" type="primary">添加</el-button>
			<!-- <el-button
				v-hasPermi="['system:menus:updated']"
				@click="handleMultipleEdit"
				:disabled="multipleSelection?.length != 1"
				type="success"
				>修改菜单</el-button
			>
			<el-button
				v-hasPermi="['system:menus:deleted']"
				@click="handleMultipleDelete"
				:disabled="multipleSelection?.length != 1"
				type="danger"
				>删除菜单</el-button
			> -->
		</el-row>
		<el-table
			v-loading="loading"
			:data="articleList"
			row-key="id"
			border
			style="width: 100%"
		>
			<el-table-column type="index" label="序号" width="80" align="center" />
			<el-table-column prop="articleTitle" label="文章标题" />
			<el-table-column prop="articleSummary" label="文章摘要" />
			<el-table-column prop="articleType" label="创建类型">
				<template #default="scope">
					{{ formattrArticleType(scope.row.articleType) }}
				</template>
			</el-table-column>
			<el-table-column prop="createdAt" label="创建时间" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button
						@click="dialogSourceRef?.editArticle(scope.row)"
						link
						type="primary"
						size="small"
						>修改</el-button
					>
					<el-button
						@click="
							async () => {
								if (successOrError) {
									await successOrError(
										(await deleteArticles(scope.row.id)) as AxiosResponse<ResponseData>
									);
									await getArticles();
								}
							}
						"
						link
						type="primary"
						size="small"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
	<DialogSource ref="dialogSourceRef" @getlist="getArticles()" />
</template>

<script setup lang="ts">
import DialogSource from './module/DialogSource.vue';
import { useArticle } from '../../composables/useArticle';
import successOrError from '../../utils/successOrError';
import { articleTypeOption } from '../../utils/configOption';

const { loading, articleList, getArticles, deleteArticles } = useArticle();
const dialogSourceRef = ref<InstanceType<typeof DialogSource>>();

const handleAdd = () => {
	dialogSourceRef.value?.handleAdd();
};

const formattrArticleType: (value: number) => string = (value) => {
	return articleTypeOption.filter((val) => val.value == value)[0].label;
};

getArticles();
</script>

<style scoped></style>
